<template>
	<view :style="{opacity: opcity}">
		<view class="cu-custom" :style="{height:CustomBar + 'rpx'}">
			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
				<view class="action" @tap="BackPage" v-if="isBack">
					<text class="cuIcon-back"></text>
					<slot name="backText"></slot>
				</view>
				<view class="content" :style="{top:StatusBar + 'rpx'}">
					<slot name="content"></slot>
				</view>
				<!-- #ifndef MP-WEIXIN -->
				<view style="padding-right: 30rpx;" @tap='openMenu' v-if="isShow">
					<text class="cuIcon-sort text-icon"></text>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<!--顶部下拉菜单-->
		<top-dropdown tui-top-dropdown="tui-top-dropdown" bgcolor="rgba(76, 76, 76, 0.95)" :show="menuShow" :height="0"
		 @close="closeMenu">
			<view class="tui-menu-box tui-padding tui-ptop">
				<view class="tui-menu-header" :style="{paddingTop:top+'px'}">
					功能直达
				</view>
				<view class="tui-menu-itembox">
					<block v-for="(item,index) in topMenu" :key="index">
						<view class="tui-menu-item" hover-class="tui-opcity" :hover-stay-time="150" @click="common(index)">
							<view class="tui-badge-box">
								<text :class="['cuIcon-' + item.icon]" style="font-size:50rpx"></text>
							</view>
							<view class="tui-menu-text">{{item.text}}</view>
						</view>
					</block>
				</view>
				<view class="cuIcon-up cuIcon-fold" style="color: #fff;font-size:50rpx" @tap.stop="closeMenu"></view>
			</view>
		</top-dropdown>
		<!---顶部下拉菜单-->
		<!-- 分享 -->
		<view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<radio-group class="block" @change="RadioChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item,index) in checkbox" :key="index">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">{{item.name}}</view>
								<radio class="round" :class="radio=='radio' + index?'checked':''" :checked="radio=='radio' + index?true:false"
								 :value="'radio' + index"></radio>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
		<!-- 分享 -->
	</view>
</template>

<script>
	import TopDropdown from './TopDropdown.vue'
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				menuShow: false,
				top: 6,
				modalName: null,
				radio: '',
				checkbox: [{
						name: '微信聊天',
						checked: false
					},
					{
						name: '朋友圈',
						checked: false
					}
				],
				topMenu: [{
					icon: "comment",
					text: "消息",
				}, {
					icon: "home",
					text: "首页",
				}, {
					icon: "settings",
					text: "设置",
				}, {
					icon: "share",
					text: "分享",
				}],
			};
		},
		components: {
			TopDropdown
		},
		name: 'cu-custom',
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var bgImage = this.bgImage;
				var style = `height:${CustomBar}rpx;padding-top:${StatusBar}rpx;`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`;
				}
				return style
			}
		},
		props: {
			bgColor: {
				type: String,
				default: ''
			},
			isBack: {
				type: [Boolean, String],
				default: false
			},
			bgImage: {
				type: String,
				default: ''
			},
			isShow: {
				type: Boolean,
				default: true
			},
			opcity: {
				type: Number,
				default: 1
			},
			num:{
				type: Number,
				default: 1
			},
			url:{
				type: String,
				default: ''
			}
		},
		onShow() {
			this.radio = ''
			this.modalName = null
		},
		methods: {
			BackPage() {
				// #ifdef H5
				window.history.back();
				// #endif
				// #ifndef H5
				if(this.url) {
					uni.redirectTo({
					    url: this.url
					});
				} else {
					uni.navigateBack({
						delta: this.num
					});
				}
				// #endif
			},
			openMenu() {
				this.menuShow = true
				this.$emit('openMenu')
			},
			closeMenu() {
				this.menuShow = false
			},
			hideModal(e) {
				this.modalName = null
			},
			RadioChange(e) {
				this.radio = e.detail.value
				switch (e.detail.value) {
					case 'radio0':
						uni.share({
							provider: "weixin",
							scene: "WXSceneSession",
							type: 0,
							href: "https://www.ahlinghui.com/download.html",
							title: "安徽柠徽信息工程有限公司",
							summary: "专业级纺织管理移动应用，可及时查看处理企业办公，车间，生产订单，OA，车间看板，机器维修等工作！",
							imageUrl: "https://www.ahlinghui.com/Uploads/image/20190429/images/AppLogo.png",
							success: (res) => {
								this.radio = ''
								this.modalName = null
							},
							fail: (err) => {
								uni.showToast({
									title: '分享失败',
									icon: 'none'
								})
								this.radio = ''
								this.modalName = null
							},
						});
						break;
					case 'radio1':
						uni.share({
							provider: "weixin",
							scene: "WXSenceTimeline",
							type: 0,
							href: "https://www.ahlinghui.com/download.html",
							title: "安徽柠徽信息工程有限公司",
							summary: "专业级纺织管理移动应用，可及时查看处理企业办公，车间，生产订单，OA，车间看板，机器维修等工作！",
							imageUrl: "https://www.ahlinghui.com/Uploads/image/20190429/images/AppLogo.png",
							success: (res) => {
								this.radio = ''
								this.modalName = null
							},
							fail: function(err) {
								uni.showToast({
									title: '分享失败',
									icon: 'none'
								})
								this.radio = ''
								this.modalName = null
							},
						});
						break;
					default:
						break;
				}
			},
			common(index) {
				console.log(index);
				switch (index) {
					case 0:
						uni.navigateTo({
							url: '/pages/Message/Message',
						});
						break;
					case 1:
						global.falg = false;
						global.tree = true
						global.userRefresh = true
						uni.redirectTo({
							url: '/pages/home/home',
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/Setting/Setting',
						});
						break;
					case 3:
						this.modalName = 'RadioModal'
						this.menuShow = false
						break;
				}
			},
		}
	}
</script>

<style>


</style>
